var radius = 80; //�������������С
var dtr = Math.PI / 180; //��껬������ת���ٶ�
var d = 450;  //��������г̶�

var mcList = [];
var active = false; //Ĭ�ϼ����Ƿ���ת��
var lasta = 2; //����ת��
var lastb = 0; //����ת��
var distr = true;
var tspeed = 4; //����ת���ٶ�
var size = 50;

var mouseX = 0;
var mouseY = 0;

var howElliptical = 1;

// var aA = null;
// var this.oDiv = null;
// var aA = null;
// var oDiv = null;
// var sa = null;
// var ca = null;
// var sb = null;
// var cb = null;
// var sc = null;
// var cc = null;
// let per = null;
// let timer = null;

class Cloud {
	constructor(props) {
		console.log(props)
		this.aA = null;
		this.oDiv = null;
		this.sa = null;
		this.ca = null;
		this.sb = null;
		this.cb = null;
		this.sc = null;
		this.cc = null;
		this.per = null;
		this.timer = null;
		this.sineCosine = this.sineCosine.bind(this);
		this.update = this.update.bind(this);
	}
	setCloud() {
		mcList = [];
		var i = 0;
		this.oDiv = document.getElementById('tagbox');
		this.aA = this.oDiv.getElementsByTagName('a');

		for (i = 0; i < this.aA.length; i++) {
			let oTag = {};

			oTag.offsetWidth = this.aA[i].offsetWidth;
			oTag.offsetHeight = this.aA[i].offsetHeight;

			mcList.push(oTag);
		}
		this.sineCosine(0, 0, 0);

		this.positionAll();

		this.oDiv.onmouseover = function () {
			active = true;
		};

		this.oDiv.onmouseout = function () {
			active = false;
		};

		// this.oDiv.onmousemove = function (ev) {
		// 	var oEvent = window.event || ev;

		// 	mouseX = oEvent.clientX - (this.oDiv.offsetLeft + this.oDiv.offsetWidth / 2);
		// 	mouseY = oEvent.clientY - (this.oDiv.offsetTop + this.oDiv.offsetHeight / 2);

		// 	mouseX /= 5;
		// 	mouseY /= 5;
		// };

		this.timer = setInterval(this.update, 48);
	}
	clearTimer(){
		this.timer && clearInterval(this.timer);
	}
	update() {
		var a;
		var b;
	
		if (active) {
			a = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
			b = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
		}
		else {
			a = lasta * 0.98;
			b = lastb * 0.98;
		}
	
		// lasta=a;
		// lastb=b;
	
		// if(Math.abs(a)<=0.1 && Math.abs(b)<=0.1)
		// {
		// 	return;
		// }
	
		var c = 0;
		this.sineCosine(a, b, c);
		for (var j = 0; j < mcList.length; j++) {
			var rx1 = mcList[j].cx;
			var ry1 = mcList[j].cy * this.ca + mcList[j].cz * (-this.sa);
			var rz1 = mcList[j].cy * this.sa + mcList[j].cz * this.ca;
	
			var rx2 = rx1 * this.cb + rz1 * this.sb;
			var ry2 = ry1;
			var rz2 = rx1 * (-this.sb) + rz1 * this.cb;
	
			var rx3 = rx2 * this.cc + ry2 * (-this.sc);
			var ry3 = rx2 * this.sc + ry2 * this.cc;
			var rz3 = rz2;
	
			mcList[j].cx = rx3;
			mcList[j].cy = ry3;
			mcList[j].cz = rz3;
	
			this.per = d / (d + rz3);
	
			mcList[j].x = (howElliptical * rx3 * this.per) - (howElliptical * 2);
			mcList[j].y = ry3 * this.per;
			mcList[j].scale = this.per;
			mcList[j].alpha = this.per;
	
			mcList[j].alpha = (mcList[j].alpha - 0.6) * (10 / 6);
		}
	
		this.doPosition();
		this.depthSort();
	}
	depthSort() {
		var i = 0;
		var aTmp = [];
	
		for (i = 0; i < this.aA.length; i++) {
			aTmp.push(this.aA[i]);
		}
	
		aTmp.sort
			(
			function (vItem1, vItem2) {
				if (vItem1.cz > vItem2.cz) {
					return -1;
				}
				else if (vItem1.cz < vItem2.cz) {
					return 1;
				}
				else {
					return 0;
				}
			}
			);
	
		for (i = 0; i < aTmp.length; i++) {
			aTmp[i].style.zIndex = i;
		}
	}
	positionAll() {
		var phi = 0;
		var theta = 0;
		var max = mcList.length;
		var i = 0;
	
		var aTmp = [];
		var oFragment = document.createDocumentFragment();
	
		//�������
		for (i = 0; i < this.aA.length; i++) {
			aTmp.push(this.aA[i]);
		}
	
		aTmp.sort
			(
			function () {
				return Math.random() < 0.5 ? 1 : -1;
			}
			);
	
		for (i = 0; i < aTmp.length; i++) {
			oFragment.appendChild(aTmp[i]);
		}
	
		this.oDiv.appendChild(oFragment);
	
		for (var i = 1; i < max + 1; i++) {
			if (distr) {
				phi = Math.acos(-1 + (2 * i - 1) / max);
				theta = Math.sqrt(max * Math.PI) * phi;
			}
			else {
				phi = Math.random() * (Math.PI);
				theta = Math.random() * (2 * Math.PI);
			}
			//����任
			mcList[i - 1].cx = radius * Math.cos(theta) * Math.sin(phi);
			mcList[i - 1].cy = radius * Math.sin(theta) * Math.sin(phi);
			mcList[i - 1].cz = radius * Math.cos(phi);
	
			this.aA[i - 1].style.left = mcList[i - 1].cx + this.oDiv.offsetWidth / 2 - mcList[i - 1].offsetWidth / 2 + 'px';
			this.aA[i - 1].style.top = mcList[i - 1].cy + this.oDiv.offsetHeight / 2 - mcList[i - 1].offsetHeight / 2 + 'px';
		}
	}
	doPosition() {
		var l = this.oDiv.offsetWidth / 2;
		var t = this.oDiv.offsetHeight / 2;
		for (var i = 0; i < mcList.length; i++) {
			this.aA[i].style.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
			this.aA[i].style.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
	
			this.aA[i].style.fontSize = Math.ceil(12 * mcList[i].scale / 2) + 8 + 'px';
	
			this.aA[i].style.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
			this.aA[i].style.opacity = mcList[i].alpha;
		}
	}
	sineCosine (a,b,c) {
		this.sa = Math.sin(a * dtr);
		this.ca = Math.cos(a * dtr);
		this.sb = Math.sin(b * dtr);
		this.cb = Math.cos(b * dtr);
		this.sc = Math.sin(c * dtr);
		this.cc = Math.cos(c * dtr);
	}
}


export default Cloud;